<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑数据源</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='layui/css/layui.css') }}">
</head>
<body>
<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">数据源名称</label>
    <div class="layui-input-block">
      <input type="text" name="connect_name" value="{{ data[0]['connect_name'] }}"
             lay-verify="required" placeholder="请输入数据源名称" autocomplete="off" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">数据库类型</label>
      <div class="layui-input-inline">
        <select name="database_type" lay-verify="required" lay-search>
          <option value="{{ data[0]['database_type'] }}" selected>{{ data[0]['database_type'] }}</option>
          <option value="openGauss">openGauss</option>
          <option value="PostgreSQL">PostgreSQL</option>
          <option value="Oracle">Oracle</option>
          <option value="MySQL">MySQL</option>
        </select>
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">主机IP</label>
      <div class="layui-input-block">
        <input type="text" name="host" value="{{ data[0]['host'] }}" lay-verify="required|ip" placeholder="请输入主机IP地址" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">端口</label>
      <div class="layui-input-block">
        <input type="text" name="port" value="{{ data[0]['port'] }}" lay-verify="required|number" placeholder="请输入端口号" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">数据库名</label>
    <div class="layui-input-block">
      <input type="text" name="dbname" value="{{ data[0]['dbname'] }}" lay-verify="required" placeholder="请输入数据库名" autocomplete="off" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-block">
        <input type="text" hidden name="db_cfg_id" value="{{ data[0]['db_cfg_id'] }}">
        <input type="text" name="username" value="{{ data[0]['username'] }}" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-block">
        <input type="password" name="password" value="{{ data[0]['password'] }}" lay-verify="required" placeholder="请输入密码" lay-affix="eye" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">描述或备注</label>
    <div class="layui-input-block">
      <textarea name="description" placeholder="请输入你想描述或备注的数据库的相关信息(非必填)" class="layui-textarea">{{ data[0]['description'] }}</textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit lay-filter="testConnectBtn">测试连接</button>
      <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
      <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
      <button type="button" class="layui-btn" onclick="closeWindow();">关闭</button>
    </div>
  </div>


</form>
</body>
<script src="{{ url_for('static', filename='js/jquery-3.6.0.min.js') }}"></script>
<script src="{{ url_for('static', filename='layui/layui.js') }}"></script>

<script>
layui.use(['form', 'laydate', 'util', 'layer'], function(){
  var form = layui.form;
  var layer = layui.layer;
  var laydate = layui.laydate;
  var util = layui.util;
  var layer = layui.layer

  // 自定义验证规则
  form.verify({
    pass: function(value) {
      if (!/(.+){6,12}$/.test(value)) {
        return '密码必须 6 到 12 位';
      }
    },
    ip: function(value, item){
      function isValidIP(ip) {
        var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
        return reg.test(ip);
      }
      if(isValidIP(value) == false){
        return '请输入正确的IP地址';
      }
    }
  });

  // 提交事件
  form.on('submit(demo1)', function(data){
    var field = data.field; // 获取表单字段值
    // 显示填写结果，仅作演示用
    // layer.alert(JSON.stringify(field), {
    //   title: '当前填写的字段值'
    // });
    // 此处可执行 Ajax 等操作
    var databaseSourceDataOfFormJson = JSON.stringify(field)
    // alert("databaseSourceDataOfForm = " + databaseSourceDataOfFormJson);
    $.ajax({
      url:'/editDatabaseSourceData',
      // type:'post',
      contentType:"json",
      data: { // 提交数据
             "databaseSourceDataOfForm": databaseSourceDataOfFormJson // 前者为字段名，后者为数据
             // "password": "admin"
      },
      success:function(data){
        // alert(data);
        if (data == "editDatabaseSourceData execute success") {
          // alert('数据源修改成功！');

          layer.confirm('数据源修改成功！', {
            btn: ['确定'] //按钮
            ,icon: 6
          }, function(){
            // 或者直接操作DOM
            parent.layui.table.reload('ID-table-demo-search', {
              url: '/getConfigDatabaseSourceData' // 重新从这个URL加载数据
            });
            // 关闭当前窗口
            var index1 = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index1); //再执行关闭
          });
        }
        // obj=JSON.parse(data);
      },
      error:function(){
          // alert("Ajax请求错误！");
          layer.alert('数据源名称已存在！', {
            icon: 5,
            shadeClose: true,
            title: 'ERROR'
          });
      }
	});

    return false; // 阻止默认 form 跳转
  });

  // 提交事件，测试连通性
  form.on('submit(testConnectBtn)', function(data){
    var field = data.field; // 获取表单字段值

    // 使用Layui的layer.load显示加载层
    var loadIndex = layer.load(1);

    // 此处可执行 Ajax 等操作
    var databaseSourceDataOfFormJson = JSON.stringify(field)
    $.ajax({
      url:'/checkDatabaseSourceLink',
      // type:'post',
      contentType:"json",
      data: { // 提交数据
             "databaseSourceDataOfForm": databaseSourceDataOfFormJson
      },
      success:function(data){
        layer.close(loadIndex); // 关闭加载层
        // alert(data);
        if (data == "Successfully connected to database") {
          // alert('连接数据库成功！');
          layer.alert('连接数据库成功！', {
            icon: 1,
            shadeClose: true,
            title: '提示'
          });
        } else {
          // alert('连接数据库失败！');
          layer.alert('连接数据库失败！', {
            icon: 2,
            shadeClose: true,
            title: '提示'
          });
        }
      },
      error:function(){
          layer.close(loadIndex); // 关闭加载层
          alert("Ajax请求错误！");
      }
	});
    return false; // 阻止默认 form 跳转
  });

});

function closeWindow(){
  var index1 = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  parent.layer.close(index1); //再执行关闭
}
</script>
</html>